<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Shop.Master" Inherits="Shop.Framework.Page.Checkout" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <title>Cart Checkout</title>
	<style type="text/css">
        .registration_wrapper{
            padding: 50px 10px;
            margin: 0 auto;
            width:450px;
            font-size:14px;
            color:#745ccf;
            height:auto;
        }
        
        .reg_form{
            margin:0 auto;
        }
        .registration_input_wrappers{
           padding:6px;
        }
        
        .registration_labels{
            width:120px;
        }
        .registration_inputs{
            border: solid 2px #7adccf;
            width: 200px;
        }
    </style>      
    <script type="text/javascript">
        Checkout = new function() {
            this.SelectDelivery = function(sender) {
                if ($(sender).val() == "Shipping") {
                    $("input[name='ExtraCharge']").val("800.00");
                    $("#PaymentType").attr("disabed", "disabed");
                }
                else {
                    $("input[name='ExtraCharge']").val("0.00");
                    $("#PaymentType").removeAttr("disabed");
                }
            }

            this.SelectPayment = function(sender) {
                $obj = $('input[name="CreditCardNumber"]');
                if ($(sender).val() != "CreditCard") {
                    $("#hiddenCard").hide("fast");
                    $obj.val('');
                }
                else {
                    $("#hiddenCard").show("fast");
                    $obj.val('');
                }

            }
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">        
    <div class="registration_wrapper">
        <!--default names-->
        <input type="hidden" name="dummy" value="dummy"/>
        
        <!--default names-->
        <form action="/finish-payment.html" method="post">            
        <b>Delivery for..</b>
        <hr/>
            <div class="registration_input_wrappers">
                <div class="registration_labels left">First Name</div>
                <div class="left"><input type="text" name="FirstName"/></div>                                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Last Name</div>
                <div class="left"><input type="text" name="LastName"/></div>                                
                <div class="clear"></div>
            </div>
          <hr/>   
         <b>Delivery to..</b>
         <hr/>   
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Street</div>
                <div class="left"><input type="text" name="DeliveryStreet"/></div>   
                <div class="clear"></div>                             
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">City</div>
                <div class="left"><input type="text" name="DeliveryCity"/></div>    
                <div class="clear"></div>                            
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">ZipCode</div>
                <div class="left"><input type="text" name="DeliveryZip" maxlength="4"/></div>                                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Country</div>
                <div class="left"><input type="text" name="DeliveryCountry" value="Philippines" readonly="readonly"/></div>                                
                <div class="clear"></div>
            </div>
            
            <hr/>            
            <b>Delivery Payment..</b>            
            <hr/>               
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Delivery Type</div>
                <div class="left">
                    <select name="ExtraChargeDescription" onchange="Checkout.SelectDelivery(this)" style="width:213px;">
                        <option value="Pick-up">For pickup - PHP 0.00</option>
                        <option value="Shipping">Shipment Delivery - PHP 800.00</option>
                    </select>
                </div>                          
                <div class="clear"></div>
            </div>
            
            <input type="hidden"/>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Payment Type</div>
                <div class="left">
                    <select name="PaymentType" onchange="Checkout.SelectPayment(this)" style="width:213px;">
                        <option value="CreditCard">Credit Card</option>
                        <option value="COD">COD / Payment on pickup</option>
                    </select>
                </div>                          
                <div class="clear"></div>
            </div>
            
            <div id="hiddenCard">            
                <div class="registration_input_wrappers">
                    <div class="registration_labels left">Credit Card Number</div>
                    <div class="left">
                        <input type="text" name="CreditCardNumber" />
                    </div>                          
                    <div class="clear"></div>
                </div>
                
                <div class="registration_input_wrappers">
                    <div class="registration_labels left">Credit Card Type</div>
                    <div class="left">
                        <select name="CardType">
                            <option value="AMEX/Diners Club/JCB">AMEX/Diners Club/JCB</option>
                            <option value="VISA">VISA</option>
                            <option value="MasterCard">MasterCard</option>
                            <option value="Discover">Discover</option>
                            <option value="Unkown">Not Listed</option>
                        </select>
                    </div>                          
                    <div class="clear"></div>
                </div>
            </div>
            <input type="submit" value="Finish Order"/>
            <%if (HassError) { %>
                <br />
                <span style="color:Red"><b><%=ErrorMessage %> </b></span>
            <%} %>
        </form>
    </div>
</asp:Content>
